<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
    <title>保 养</title>
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<style>
    body{
        font-family: SimHei,"微软雅黑",sans-serif;
    }
    .content-items li{
        list-style: none;
        float: left;
        padding: 4px 8px;
        margin: 5px;
        border: 1px #ededed solid;
        cursor: pointer;
        font-weight: 700;
        color: #666;
    }
</style>
<body>

<nav class="mui-bar mui-bar-tab">
    <div class="mui-bar mui-bar-tab">
        <div class="weui-tabbar" style="text-align: center;height: 55px">
            <div class="weui-tabbar__item" style="color: white;border-right: 1px #B2B2B2;background-color: black;flex-grow: 2">
                <div class="weui-cell" style="padding: 0;position: relative">
                    <h4 style="position: absolute;left: 25%;top:10%;margin-top:10px">合计:¥<span id="totalprice">0</span></h4>
                </div>
                <p class="weui-tabbar__label" style="position: absolute;bottom: 0;left: 25%;">(不含安装费)</p>
            </div>
            <div class="weui-tabbar__item" style="background-color: #CE3C39;flex-grow: 1">
                <form id="payform" method="post" action="http://apis.ikartek.com/v1/payservice/example/postjsapi.php">
                    <input type="hidden" name="out_trade_no" value="1516086399"/> <!--商品单号-->
                    <input type="hidden" name="body" value="body"/>  <!--商品名称-->
                    <input type="hidden" name="attach" value="attach"/>
                    <input type="hidden" name="total_fee" value="1"/> <!--商品价格(分为单位)-->
                    <input type="hidden" name="goods_tag" value="goods_tag"/>
                    <input type="hidden" name="notifiy_url"  value="http://testwx.ikartek.com/indexs" />
                    <input type="hidden" name="openid"  th:value="${openid}" />
                    <!--<input type="hidden" name="openid"  value="oIIJw0kQV5XUyESFcG2OD8hbDa1I" />-->
                    <input type="hidden" name="redirect_url"  value="http://testwx.ikartek.com/item/item?busiid=48"/>
                    <button id="pay" type="button" style="background-color:#CE3C39;color: white;border: 0;font-size: 18px;margin-top: 5px" >
                        支 付
                    </button>
                </form>
            </div>
        </div>
    </div>
</nav>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">套 餐</h1>
</header>
<div class="mui-content">
    <div class="weui-panel weui-panel_access" style="border-bottom:1px solid #999">
        <div th:if="${custcar!=null}" class="weui-flex" style="border-bottom:1px solid #999;padding:10px 5px;">
            <div class="weui-flex__item" style="flex-grow: 1;padding: 3px 5px">
                <img style="width: 50px;height: 50px" class="weui-media-box__thumb" th:src="'/img/caricon/'+${custcar.brandlogo}"/>
            </div>
            <div class="weui-flex__item" style="flex-grow: 10;">
                <h4 class="weui-media-box__title" th:text="${custcar.carfactname}+' '+${custcar.carlinename}"></h4>
                <p class="weui-media-box__desc">
                    <span th:text="${custcar.carvol}"></span>
                    <span th:text="${custcar.caryear}"></span>
                </p>
            </div>
            <div class="weui-flex__item" style="flex-grow: 4;">
                <div class="weui-cell weui-cell_access" href="javascript:;" style="padding: 5px 5px">
                    <div class="weui-cell__bd">
                        <p style="font-size: 18px;color: black;padding-bottom: 4px" id="carpro" onclick="showpro()">粤</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="text" id='carno1' th:onchange="'javascript:savecarno()'" style="border: none;width:66px;margin:0;padding:0;text-align: right;" maxlength="6" placeholder="车牌号"/>
                    </div>
                    <input id="custcarid" type="hidden" th:value="${custcar.custcarid}"/>
                </div>
            </div>
            <input type="hidden" th:value="${custcar.carno}" th:id="carno"/><!--存储读取的车牌号码-->
        </div>
        <div th:if="${custcar!=null}" class="weui-flex" style="border-bottom:1px solid #999">
            <div class="weui-flex__item" style="border-right:1px solid #999">
                <div class="weui-cell weui-cell_access" style="padding:5px 5px">
                    <div class="weui-cell__bd">
                        <p>里程</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="text" id='kmpicker' style="border: none;width:82px;margin:0;padding:0" readonly="readonly"/>
                        <input type="hidden" id='km' th:value="${custcar.curkilo}"/>
                        <span  id="ppp" style="font-size: 12px">KM</span>
                    </div>
                </div>
            </div>
            <div class="weui-flex__item ">
                <div class="weui-cell weui-cell_access" style="padding: 5px 3px">
                    <div class="weui-cell__bd">
                        <p>上路时间</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input id="datesel" type="text" data-toggle="date" th:value="${custcar.regdate}" style="border: none;width:95px;margin:0;padding:0px" readonly="readonly"/>
                    </div>
                </div>
            </div>
        </div>
        <div th:if="${custcar==null}">
            <a th:if="${custid!=null}" style="border-bottom:1px solid #999" class="weui-cell weui-cell_access" th:href="@{/person/addcar(flag=1,busiid=${busiid})}">
                <div class="weui-cell__bd">
                    <p class="fff" th:data="1">您还没有选择默认车型</p>
                </div>
                <div class="weui-cell__ft">
                    <p>请选择</p>
                </div>
            </a>
            <a th:if="${custid==null}" class="weui-cell weui-cell_access" th:href="@{/person/login(flag=1,busiid=${busiid})}" style="border-bottom:1px solid #999">
                <div class="weui-cell__bd">
                    <p class="fff" th:data="0">您还没有登录</p>
                </div>
                <div class="weui-cell__ft">
                    <p>请登录</p>
                </div>
            </a>
        </div>
        <div class="weui-panel__bd">
            <div class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>已选: <span id="dissel" style="color: black"></span></p>
                </div>
            </div>
        </div>
    </div>
    <div th:if="${discpack!=null}" class="weui-cells__title">适用范围:不限制门店</div>
    <ul th:each="discpack:${discpack}" class="mui-table-view mui-table-view-chevron total">
        <li class="mui-table-view-cell mui-collapse tot">
            <a class="suc" href="#">
                <div class="weui-flex">
                    <div th:data="${discpack.tcid}" class="circle">
                        <span class="weui-icon-circle" ></span>
                    </div>
                    <div class="weui-flex__item">
                        <span class="tcname" th:text="${discpack.tcname}"></span>
                        <p th:if="${discpack.validmonth!=null}" th:text="'有效期:'+${discpack.validmonth}+'个月'"></p>
                    </div>
                </div>
            </a>
            <ul class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell" style="padding-right: 0">
                    <!--<img th:src="@{/img/by/jiyou.png}" />-->
                    <div class="shop">
                        <div class="weui-flex">
                            <div class="weui-flex__item">
                                <p style="font-size: 16px;color: black" th:text="${discpack.remark}"></p>
                                <p style="text-decoration:line-through" th:text="'总价值:￥'+${discpack.totalval}"></p>
                                <p><span style="color: black">套餐优惠价:￥</span><span class="saleprice" style="color: #CE3C39" th:text="${discpack.saleprice}"></span></p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
    <div th:if="${#lists.size(discpack1)!=0}" class="weui-cells__title">适用范围:指定门店</div>
    <ul th:each="discpack1:${discpack1}" class="mui-table-view mui-table-view-chevron total">
        <li class="mui-table-view-cell mui-collapse tot">
            <a class="suc" href="#">
                <div class="weui-flex">
                    <div th:data="${discpack1.tcid}" class="circle">
                        <span class="weui-icon-circle" ></span>
                    </div>
                    <div class="weui-flex__item">
                        <span class="tcname" th:text="${discpack1.tcname}"></span>
                        <p th:text="'有效期:'+${discpack1.validmonth}+'个月'"></p>
                    </div>
                </div>
            </a>
            <ul class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell" style="padding-right: 0">
                    <!--<img th:src="@{/img/by/jiyou.png}" />-->
                    <div class="shop">
                        <div class="weui-flex">
                            <div class="weui-flex__item">
                                <p style="font-size: 16px;color: black" th:text="${discpack1.remark}"></p>
                                <p style="text-decoration:line-through" th:text="'总价值:￥'+${discpack1.totalval}"></p>
                                <p><span style="color: black">套餐优惠价:￥</span><span class="saleprice" style="color: #CE3C39" th:text="${discpack1.saleprice}"></span></p>
                                <p><span style="color: black">使用门店: </span><span style="color: #CE3C39" th:text="${discpack1.chnname}"></span></p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

<input id="busiid" type="hidden" th:value="${busiid}"/>
<input id="custid" type="hidden" th:value="${custid}"/>


<link rel="stylesheet" type="text/css" th:href="@{/css/shopcss/shopdetail.css}" />
<script th:inline="javascript">
    /*<![CDATA[*/

    //支付
    $("#pay").click(function () {
        var fff=$(".fff").attr('data');
        if(fff==0){
            $.alert("请先登录");
            var busiid=$("#busiid").val();
//            location.href="/person/login?flag=1&busiid="+busiid;
        } else if(fff==1){
            $.alert("请先选择默认车型");
        } else {
            var dissel = $("#dissel").text();
            if (dissel == "") {
                $.alert("请选择套餐");
            } else {
                if ($("#carno1").val() == '') {
                    $.alert("请先填写车牌号");
                } else {
                    if ($("#datesel").val() == '') {
                        $.alert("请先选择上路时间");
                    } else {
                        mui.ajax('/item/getoid',{
                            type:'get',//HTTP请求类型
                            success:function(data){
                                var storage=window.localStorage;
                                var paybody=$("#dissel").text();//商品名称
                                var custcarid=$("#custcarid").val();
                                var custid=$("#custid").val();
                                var tcid=storage.getItem('tcid');
                                $("input[name='out_trade_no']").val(data);
                                $("input[name='body']").val(paybody);
                                var hh="http://testwx.ikartek.com/item/paydis/"+custcarid+"/"+tcid+"/"+data+"/"+custid;
                                $("input[name='notifiy_url']").val(hh);
                                $("#payform").submit();
                            }
                        });
                    }
                }
            }
        }
    });



    //选择项目
    mui(".mui-collapse").on('tap', '.suc', function(event){
        var id=$(this).find(".circle").children(":eq(0)").attr('class');
        if(id=="weui-icon-circle")
        {
            var flag=true;
            $(".circle").each(function () {//查找是否有重复的项目
                var circle= $(this).find("span").attr('class');
                if(circle=="weui-icon-success")
                {
                    $(this).find("span").attr('class',"weui-icon-circle");
                    $(this).closest('.tot').removeClass('mui-active');
                    flag=false;
                }
                return flag;
            });
            $(this).find(".circle").children(":eq(0)").attr('class',"weui-icon-success");
        }
        if(id=="weui-icon-success")
        {
            $(this).find(".circle").children(":eq(0)").attr('class',"weui-icon-circle");
        }
        count()
    });

    //计算被选中项目的总金额(选中门店以后再确定)以及数量
    function count() {
        //得到被选中的项目
        var flag=true;
        $(".total").each(function () {
            var circle=$(this).find(".circle").children(":eq(0)").attr('class');
            if(circle=="weui-icon-success") {
                var storage=window.localStorage;
                var tcid=$(this).find(".circle").attr('data');
                storage.setItem("tcid",tcid);
                $("#totalprice").text($(this).closest('.total').find(".saleprice").text());
                $("#dissel").text($(this).find('.tcname').text());
                flag=false;
                return false;
            }
        });
        if(flag){
            $("#totalprice").text("0");
            $("#dissel").text("");
        }
    }

    $(document).ready(function () {
        //加载行驶里程
        var km = $("#km").val();
        if(km!=null){
            km=km.split("");
            var kmp="";
            for(var i=0;i<6-km.length;i++){
                kmp+="0 ";
            }
            for(var j=0;j<km.length;j++){
                kmp+=km[j]+" ";
            }
            var storage=window.localStorage;
            var kmpload=storage.getItem("kmp");
            if(kmpload==kmp||kmpload==null){
                loadkm(kmp);
            } else {
                loadkm(kmpload);
            }
        }
        /*分割车牌赋值*/
        var carno=$("#carno").val();
        if(carno!=""&&carno!=null){
            var carpro=carno.substring(0,1);
            var carnum=carno.substring(1);
            $("#carpro").text(carpro);
            $("#carno1").val(carnum);
        }
        var custid=$("#custid").val();
        var tcid=storage.getItem('tcid');
        if(tcid!=null){
            setInterval("ajaxstatus()", 3000);
        }
    });

    function ajaxstatus() {
        var custid=$("#custid").val();
        var storage=window.localStorage;
        var tcid=storage.getItem('tcid');
        $.ajax({
            url: "/item/checkpaystat?custid=" + custid+"&tcid="+tcid,
            type: 'POST',
            async: false,//同步提交，等ajax代码执行后再往下执行代码
            contentType: 'application/json',
            success: function (data) {
                if(data=="1"){
                    $.toast("支付成功", 1500);
                    location.href="/person/mytc"
                }
            }
        })
    }

    //日期选择器
    $("#datesel").calendar({
        dateFormat:"yyyy-mm-dd",
        onClose:function () {
            var date=$("#datesel").val();
            mui.ajax('/item/updatedate',{
                data:{
                    date:date
                },
                type:'get',//HTTP请求类型
                success:function(data){
                    $.toptip('更新成功',1000, 'success');
                }
            })
        }
    });



    //post提交
    function httpPost(URL, PARAMS) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";

        for (var x in PARAMS) {
            var opt = document.createElement("textarea");
            opt.name = x;
            opt.value = PARAMS[x];
            temp.appendChild(opt);
        }
        document.body.appendChild(temp);
        temp.submit();
        return temp;
    }

    function loadkm(kmp) {
        $("#kmpicker").val(kmp);
        $("#kmpicker").picker({
            title: "请选择行驶里程",
            cols: [
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                },
                {
                    values: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9']
                }
            ],
            onClose:function () {
                var kmp=$("#kmpicker").val();
                var km=kmp.replace(/\s+/g,"");
                mui.ajax('/item/updatekm',{
                    data:{
                        km:km
                    },
                    type:'get',//HTTP请求类型
                    success:function(data){
                        $.toptip('更新成功',1000, 'success');
                        var storage=window.localStorage;
                        storage.setItem("kmp",kmp);
                    }
                })
            }
        });
    }

    /*弹出车牌的省份*/
    function showpro() {
        $("#pro").removeAttr("style");
    }
    /*选择车牌省份后赋值过去*/
    function choocepro(province) {
        $("#carpro").text(province);
        $('#pro').attr("style","display:none");
        savecarno();
    }
    /*输入车牌号ajax存储*/
    function savecarno() {
        var carpro=$("#carpro").text();
        var carno=$("#carno1").val();
        var flag=carpro+carno;
        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
        var result = express.test(flag);
        if(result==false){
            $.alert('请输入正确的车牌号!')
        } else {
            mui.ajax('/person/savecarno',{
                data:{
                    carno:carpro+carno,
                    custcarid:$("#custcarid").val()
                },
                type:'get',//HTTP请求类型
                success:function(data){
                    if(data=='success'){
                        $.toptip('更新成功', 'success');
                    }else {
                        $.toptip('操作失败', 'error');
                    }
                }
            })
        }
    }

    $(".mui-icon-left-nav").click(function () {
        location.href="/indexs"
    })
    /*]]>*/
</script>

</body>

</html>